<template>
  <div class="download fill pnx flex-col">
    <div class="title pl">播放历史</div>
    <div class="content flex-1">
      <ListDisplay :list="history"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator"
import Vue from "vue"
import ListDisplay from "@/components/listDisplay/ListDisplay.vue";
import {Song} from "@/ts.d/classes/Song";
import {State} from "vuex-class";

@Component({
  components: {ListDisplay}
})
export default class History extends Vue {
  @State("history") history!: Song[]
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.title {
  font-weight: 600;
  font-size: 35px;
}

.nav {
  li {
    padding: $pn $pl;
    margin-right: $mn;
    cursor: pointer;
  }

  .active {
    span {
      position: relative;
      color: $text-success;
    }

    span:after {
      content: "";
      width: 150%;
      height: 4px;
      background-color: white;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $border-radius-s;
      bottom: -6px;
    }
  }
}

.select{
  margin: 0 $mn;
  cursor: pointer;
  background-color: rgba(255,255,255,0.1);
  padding: $pn;
  border-radius: $border-radius-n;
  &:hover{
    background-color: rgba(255,255,255,0.3);
  }
}
.content{
  overflow-y: auto;
}
</style>
